<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.info,.update{
			margin-right:10px;
			color:blue;
			cursor: pointer;
		}
		table{
		width:97%;
		margin:0 auto;
		border:3px double #000; 
		text-align:center; 
		padding: 0px;
		border-spacing: 0px;
		}
		table tr{
		height:40px;
		font-size:15px;
		}
		table tr td{
		/* width:180px; */
		border-top: 1px solid #000;  
		border-right: 1px solid #000;
		/*  border:1px solid #000;  */
		}
		.border{
			border:1px solid #000;
		}
		.border2{
		border:0px;
		}
		input{
		border:0px;
		text-align:center;
		width:70px;
		background-color:#f0f0f0;
		}
		
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>会员排行</title>
<script type="text/javascript" src="../js/jquery-3.1.0.js"></script>
	<script type="text/javascript">
		$(function(){
			var xx1,xx2,xx3,xx4,xx5,xx6;
			/*在div里面显示会员详情：*/
			$(".info").click(function(){
				//创建一个新的页面,传递所有信息给它：得到ID：
				var id=$(this).parent().parent().find("td .xx1").val();
				$.getJSON(
						"../UserServlet?method=findOneusers", {
							userid:id
						},
						function(data) {
							if(data=="0")
								$("#rightdiv").load("userInfo.jsp"); 
							});
			});
			/*单击修改时，可以对所有信息进行修改*/
			$(".update").click(function(){
				var text=$(this).attr("id");
				if(text=="1"){
					$(this).attr("id","0");
					$(this).parent().parent().find("td input[id]").addClass("border");
					xx1=$(this).parent().parent().find("td .xx1").val();
					xx2=$(this).parent().parent().find("td .xx2").val();
					xx3=$(this).parent().parent().find("td #xx3").val();
					xx4=$(this).parent().parent().find("td .xx4").val();
					xx5=$(this).parent().parent().find("td #xx5").val();
					xx6=$(this).parent().parent().find("td #xx6").val();
				}else if(text=="0"&&window.confirm("你确定要修改吗？")){//并且提示框点击了确定
					$(this).attr("id","1");
					$(this).parent().parent().find("td input").addClass("border2");
					var x3=$(this).parent().parent().find("td #xx3").val();
					var x5=$(this).parent().parent().find("td #xx5").val();
					var x6=$(this).parent().parent().find("td #xx6").val();
					//调用sevlet的方法：
					$.getJSON(
							"../UserServlet?method=updateusers", {
								mobilephone:x3,
								rankpoints:x5,
								username:x6,
								id:xx1
							},
							function(data) {
								if(data=="0")
									$("#rightdiv").load("usersAll.jsp"); 
								});
				}else{
					$(this).attr("id","1");
					$(this).parent().parent().find("td input").addClass("border2");
					$(this).parent().parent().find("td .xx1").val(xx1);
					$(this).parent().parent().find("td .xx2").val(xx2);
					$(this).parent().parent().find("td #xx3").val(xx3);
					$(this).parent().parent().find("td .xx4").val(xx4);
					$(this).parent().parent().find("td #xx5").val(xx5);
					$(this).parent().parent().find("td #xx6").val(xx6);
				}
			});
			/* 删除条目： */
			 $(".del").click(function(){
				if(window.confirm("您真的要删除该会员吗？")){
					$(this).parent().parent().css("display","none");
					var idstr=$(this).attr("id");
					  $.ajaxSettings.async=false;  
					$.getJSON(
							"../UsersServlet?method=deleteuser", {
								userid:idstr
							},
							function(data) {
								if(data=="0"){}
									//如果成功删除这一行
									/*  alert(1); */
									/* $(this).parent().parent().hide(); */
			 						
								});
				}
				
			}); 
			
		});
	</script>
</head>
<body>
	<h3 style="margin-left:30px;margin-top:40px;margin-bottom: 20px;">会员排行</h3>
	<div style=" width:100%;margin:0 auto;">
		
	<table>
		<tr style="font-weight: bold;background-color:#e5e5e5;">
			<td style="border-top:none; ">会员号</td>
			<td style="border-top:none; ">会员名称</td>
			<td style="border-top:none; ">联系方式</td>
			<td style="border-top:none; ">会员等级</td>
			<td style="border-top:none; ">会员积分</td>
			<td style="border-top:none; ">注册日期</td>
			<td style="border-top:none; border-right: none;">操作</td>
		</tr>
		<c:forEach items="${pageBean}" var="userinfo">
			<tr >
				<td><input class="xx1" type="text" value="${userinfo.userid}" /></td>
				<td><input id="xx6" type="text" value="${userinfo.username }" /></td>
				<td><input id="xx3" type="text" value="${userinfo.mobilephone}" /></td>
				<td><input class="xx4" type="text" value="${userinfo.userrank}" /></td>
				<td><input id="xx5" type="text" value="${userinfo.rankpoints}" /></td>
				<td><input class="xx2" type="text" value="${userinfo.regtime}" /></td>
				<td style="border-right:none;width:160px;"><span class="info"><img src="../img/icon_view.gif" height="20px;"/></span><span class="update" id="1"><img  height="20px;" src="../img/icon_edit.gif"></span><span id="${orderinfo.orderid}" class="del"><img  height="20px;" src="../img/icon_trash.gif"></span></td>
			</tr>
		</c:forEach>
	</table>
	</div>
</body>
</html>